<template>
  <div class="h-100 flex flex-col">
    <template v-if="props.showType == 0">
      <!-- 商品标题 -->
      <div class="left_2">
        <up-row style="height: 100%">
          <up-col :span="1"></up-col>
          <up-col :span="11">
            <up-row>
              <up-col :span="4.5">
                <div>单价</div>
              </up-col>
              <up-col :span="4" textAlign="center"> 数量 </up-col>
              <up-col :span="3.5">
                <div class="flex items-center justify-end">
                  <text>金额(元)</text>
                  <text
                    @click="emit('onAllDeleteCheckGoods')"
                    class="iconfont icon-qingkongtubiao font-size-22 color-3 p-x-15 p-y-10"
                  />
                </div>
              </up-col>
            </up-row>
          </up-col>
        </up-row>
      </div>
      <!-- 商品 -->
      <scroll-view scroll-y class="flex-1 h-0">
        <div
          v-if="!props.list.length"
          class="flex flex-col items-center justify-center h-100"
        >
          <image mode="widthFix" style="width: 80rpx" :src="saomaqiang_img" />
          <div class="m-t-10 font-size-16">暂未录入商品</div>
          <div class="m-t-6 font-size-14 color-3">请扫描商品条码或搜索商品</div>
        </div>

        <div v-else class="goods">
          <div
            :class="['good color-1', props.checkIndex == i && 'acitve']"
            v-for="(item, i) in props.list"
            @click="emit('clickGoods', i, item)"
            :key="i"
          >
            <up-row align="top">
              <up-col :span="1">
                <div class="good-index color-3 font-size-16 text-center p-t-2">
                  {{ props.list.length - i }}
                </div>
              </up-col>
              <up-col :span="11">
                <div class="good-name">
                  <span>{{ item.productName }}</span>

                  <template v-if="item.productType == 10">
                    <span v-if="item.unitName">/{{ item.unitName }}</span>
                  </template>

                  <template v-else-if="item.productType == 20">
                    <span v-if="item.specField">{{ item.specField }} </span>
                    <span v-if="item.unitName">/{{ item.unitName }}</span>
                    <span v-if="item.packSize">({{ item.packSize }})</span>
                  </template>

                  <template v-else-if="item.productType == 30">
                    <span v-if="item.specField">/{{ item.specField }} </span>
                    <span v-if="item.specField1">/{{ item.specField1 }}</span>
                    <span v-if="item.unitName">/{{ item.unitName }}</span>
                  </template>

                  <template v-else-if="item.productType == 40">
                    <span v-if="item.unitName">/{{ item.unitName }}</span>
                  </template>
                </div>
                <div class="good-right">
                  <up-row class="m-t-6 good-price-num-close">
                    <up-col :span="4.5">
                      <div class="flex items-center">
                        <text
                          >{{
                            (item.promotionPrice || item.retailPrice).toFixed(2)
                          }}
                          / {{ item.unitName }}</text
                        >
                        <text
                          v-if="item.promotionPrice"
                          class="m-l-10 ovl-price"
                          >{{ item.retailPrice.wtoFixed(2) }}</text
                        >
                      </div>
                    </up-col>
                    <up-col :span="4" textAlign="center">
                      <div
                        class="h-36 flex items-center justify-center color-1 font-size-18"
                      >
                        <up-number-box
                          v-if="i == props.checkIndex"
                          :integer="false"
                          :min="1"
                          :max="500"
                          v-model="item.num"
                          :decimalLength="0"
                          inputWidth="60rpx"
                          button-size="36"
                          buttonWidth="36rpx"
                          buttonHeight="36rpx"
                          inputBgColor="#fff"
                          iconStyle="color: #fff"
                          class="diy-number-box"
                          @change="
                            (v) => emit('numberChange', v, props.checkIndex)
                          "
                          @overlimit="numberOverlimit"
                        ></up-number-box>
                        <div v-else>x {{ item.num }}</div>
                      </div>
                    </up-col>
                    <up-col :span="3.5">
                      <div class="flex items-center justify-end">
                        <text class="font-size-18 font-weight-700">
                          ￥{{
                            utils
                              .FloatMul(
                                item.num,
                                item.promotionPrice || item.retailPrice
                              )
                              .wtoFixed(2)
                          }}
                        </text>
                        <div class="w-45 flex items-center justify-center">
                          <text
                            @click="emit('onDeleteGoodsItem', i, item)"
                            v-if="props.checkIndex == i"
                            class="iconfont icon-guanbi font-size-20 color-4 p-x-15 p-t-4"
                            style="transform: translateY(-2rpx)"
                          ></text>
                        </div>
                      </div>
                    </up-col>
                  </up-row>

                  <div class="good-tips flex items-center m-t-8">
                    <text v-if="item.promotionType == 1" class="cu">促</text>
                    <text v-if="item.promotionType == 2" class="zhekou">
                      限时折扣
                    </text>
                    <text v-if="item.promotionType == 3" class="zhekou">
                      出清立折
                    </text>
                  </div>
                </div>
              </up-col>
            </up-row>
          </div>
        </div>
      </scroll-view>
    </template>

    <!-- 挂单列表 -->
    <template v-else>
      <div class="left_2">
        <up-row style="height: 100%">
          <up-col offset="0.6" :span="4"> 时间 </up-col>
          <up-col :span="1.85" textAlign="center">件数</up-col>
          <up-col :span="1.85" textAlign="center">金额(元)</up-col>
          <up-col :span="1.85" textAlign="center">会员尾号</up-col>
          <up-col :span="1.85" textAlign="center">
            <div>操作</div>
          </up-col>
        </up-row>
      </div>

      <scroll-view scroll-y class="flex-1 h-0">
        <div
          v-if="!props.list.length"
          class="flex flex-col items-center justify-center h-100"
        >
          <image mode="widthFix" style="width: 80rpx" :src="guadan_empty_img" />
          <!-- <div class="m-t-10 font-size-16">无挂单记录</div> -->
          <div class="m-t-6 font-size-14 color-3">无挂单记录</div>
        </div>

        <div v-else class="guadan_ls color-1">
          <up-row
            @click="emit('clickGoods', i, item)"
            :class="['item', i == props.checkIndex && 'active']"
            v-for="(item, i) in props.list"
            :key="i"
          >
            <up-col offset="0.6" :span="4"> {{ item.date }} </up-col>
            <up-col textAlign="center" :span="1.85">
              {{ item.goods.length }}
            </up-col>
            <up-col textAlign="center" :span="1.85"> {{ item.total }} </up-col>
            <up-col textAlign="center" :span="1.85">
              {{ item.mermberPhone || "-" }}
            </up-col>
            <up-col textAlign="center" :span="1.85">
              <text
                @click.stop="emit('onDeleteGoodsItem', i)"
                class="iconfont icon-guanbi font-size-22 color-4 p-x-15 p-t-14 p-b-10"
              ></text>
            </up-col>
          </up-row>
        </div>
      </scroll-view>
    </template>
  </div>
</template>
<script setup>
import saomaqiang_img from "@/static/images/saomaqiang.png";
import guadan_empty_img from "@/static/images/guadan_empty.png";
import utils from "@/utils";

const emit = defineEmits([
  "clickGoods",
  "onDeleteGoodsItem",
  "onAllDeleteCheckGoods",
]);
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  checkIndex: {
    type: Number,
    default: 0,
  },
  // 显示类型 0已下单商品  1取单列表
  showType: {
    type: String,
    default: 0,
  },
});

function numberOverlimit(type) {
  console.log(type);
  if (type == "minus") {
    uni.showToast({
      title: "单次计算商品数量不能小于下限：1",
      icon: "none",
    });
    return;
  }
  uni.showToast({
    title: "单次计算商品数量不能超过上限：500",
    icon: "none",
  });
}
</script>
<style lang="scss" scoped>
.left_2 {
  height: 38rpx;
  border-bottom: 1px solid $uni-border-color-1;
  font-size: 14rpx;
  color: $uni-text-color-3;
  .icon-qingkongtubiao {
    width: 20rpx;
    height: 20rpx;
    text-align: center;
    line-height: 20rpx;
  }
}
.goods {
  .good {
    padding: 12rpx 0;
    border-bottom: 1px solid $uni-border-color-1;
    .good-name {
      font-size: 18px;
      font-weight: 700;
      line-height: 28px;
      color: $uni-text-color-1;
    }
    .good-right {
      // flex: 1;
      // width: 0;

      .good-price-num-close {
        .ovl-price {
          text-decoration: line-through;
          color: $uni-text-color-3;
        }

        .diy-number-box {
          border-radius: 4rpx;

          overflow: hidden;
          ::v-deep {
            .u-number-box__input {
              margin: 0;
              // color: #;
            }
            .cursor-pointer {
              width: 36rpx !important;
              height: 36rpx !important;
              line-height: 36rpx !important;
              text-align: center !important;
              color: #fff !important;
              font-weight: 700 !important;
              background: $uni-color-primary !important;
            }
            .u-number-box__minus--disabled {
              opacity: 0.5;
            }
          }
        }
      }
      .good-tips {
        gap: 8rpx;
        font-size: 14rpx;

        .cu {
          width: 20rpx;
          height: 20rpx;
          line-height: 20rpx;
          text-align: center;
          background: #e6a23c;
          color: $uni-text-color-inverse;
        }
        .zhekou {
          border-radius: 2rpx;
          border: 1px solid $uni-color-primary;
          line-height: 20rpx;
          padding: 0 4rpx;
          color: $uni-color-primary;
        }
      }
    }
  }

  .acitve {
    background: rgba($color: $uni-color-primary, $alpha: 0.1);
  }
}

.guadan_ls {
  .item {
    height: 66rpx;
    border-bottom: 1px solid $uni-border-color-1;
  }
  .active {
    background: rgba($color: $uni-color-primary, $alpha: 0.1);
  }
}
</style>
